<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>依赖注入</title>
</head>
<body>
  <div id="app">
    <my-root></my-root>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const { computed, ref, provide, inject } = Vue
  const Four = {
    template: `
      <div>
        <h4>4444 -- {{ gift }} -- {{ count }} -- {{ test }} -- {{ obj() }} -- {{ fn }}</h4>
      </div>
    `,
    setup () {
      const gift = inject('gift')
      const count = inject('count')
      const test = inject('test', '测试') // 默认值
      const obj = inject('obj', () => ({ a: 1, b: 2})) // 工厂函数
      const fn = inject('fn', () => {}, false) // 接收函数作为值
      return { gift, test, obj, count }
    },
  }
   const Third = {
    template: `
      <div>
        <h3>33333-</h3>
        <my-four></my-four>
      </div>
    `,
    setup () {
      provide('gift', '传家宝3')
      return {  }
    },
    components: {
      MyFour: Four
    }
  }
  const Second = {
    template: `
      <div>
        <h2>222222 ---</h2>
        <my-third></my-third>
      </div>
    `,
    setup () {
      provide('gift', '传家宝2')
      return {  }
    },
    components: {
      MyThird: Third
    }
  }
  const First = {
    template: `
      <div>
        <h1>111111</h1>
        <button @click="count++">加1</button> {{ count }}
        <my-second></my-second>
      </div>
    `,
    components: {
      MySecond: Second
    },
    setup () {

      const count = ref(0)
      provide('gift', '传家宝1')
      provide('count', count)
      return { count }
    }
  }

  Vue.createApp({
   
    components: {
      MyRoot: {
        template: `
          <my-first></my-first>
        `,
        setup () {
          provide('gift', '传家宝')
          return {}
        },
        components: {
          MyFirst: First
        }
      }
    }
  }).mount('#app')
</script>
</html>